<template>
	<view class="longbingbing-partner-list-item">
		<auth :needAuth="!userInfo || (userInfo && (!userInfo.phone || !userInfo.nickName))"
			:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="$util.goUrl({url: `/partner/pages/detail?type=${type}&id=${ type=='record' ? info.join_id: info.id}`})" style="width: 100%">
			<view class="partner-item rel fill-base" :class="[{'mt-md': itemIndex > 0}]">
				<image :src="info.cover" mode="aspectFill" class="cover"></image>
				<view class="item-label abs c-base f-icontext" v-if="type == 'record'">
					<block v-if="info.start_time*1000 > new Date().getTime()">待开始</block>
					<block v-if="info.start_time*1000 < new Date().getTime() && info.end_time*1000 > new Date().getTime() ">活动中</block>
					<block v-if="info.end_time*1000 < new Date().getTime()">已结束</block>
				</view>
				<view class="item-label abs c-base f-icontext" v-else>{{info.type_name}}</view>
				<!-- #ifdef MP-WEIXIN -->
				<button @tap.stop.native class="item-share abs flex-center" open-type="share" :data-index="itemIndex" v-if="info.status_text !== 2">
					<i class="iconfont iconfenxianggeipengyou c-base" style="font-size: 13px;"></i>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="item-share abs flex-center" @tap.stop="toAppShare" v-if="info.status_text !== 2">
					<i class="iconfont iconfenxianggeipengyou c-base" style="font-size: 13px;"></i>
				</view>
				<!-- #endif -->
				<view class="pd-lg">
					<view class="flex-between">
						<view class="f-title text-bold ellipsis flex-1" style="line-height: normal;">{{info.title}}</view>
						<view class="f-paragraph pl-lg text-bold" style="color: #FF3C6E;">{{info.money_type == 3 ? `¥${info.join_price}/人` : `免费`}}</view>
					</view>
					<view class="flex-y-center pt-md c-A3A3A3 f-caption">
						<i class="iconfont iconshijianguanli mr-sm" style="font-size: 12px;"></i>
						<text>{{ $util.formatTime(info.start_time*1000,'YY.M.D h:m') }}</text>
						<text style="padding-left: 16rpx;">活动开始</text>
					</view>
					<view class="flex-y-center c-A3A3A3 f-caption pb-md b-1px-b" style="padding-top: 16rpx;">
						<i class="iconfont icondizhiguanli3 mr-sm" style="font-size: 13px;"></i>
						<text v-if="!type" class="pr-sm">{{info.distance | hannelDistance}}km</text>
						<text class="ellipsis">{{`${info.address} ${info.address_info}`}}</text>
					</view>
					<view class="flex-between pt-md">
						<block v-if="type == 'record'">
							<view class="flex-center">
								<view class="f-caption flex-y-baseline">
									<text class="f-paragraph text-bold" :style="{color: primaryColor}">{{info.join_num}}</text>/{{info.sign_num}}人加入
								</view>
								<view class="item-status pl-sm pr-sm flex-center f-icontext ml-sm" :style="{color: statusType[info.status_text].color, background: statusType[info.status_text].bgColor}">{{statusType[info.status_text].name}}</view>
								<view class="f-caption ml-md" style="color: #169bd5;" v-if="info.status_text == 2" @tap.stop="toSee(info.partner_check_text)">查看原因</view>
							</view>
							<view class="flex-center">
								<block v-if="(info.is_create && (info.status_text==1 || (info.status_text > 2 && info.sign_start_time*1000 > new Date().getTime()))) || 
								(!info.is_create && ((info.status_text == 6 && info.sign_start_time*1000 > new Date().getTime()) || (info.status_text!=6 && info.end_time*1000 > new Date().getTime())))">
									<view class="item-btn flex-center f-desc pl-md pr-md" :style="{color: primaryColor, borderColor: primaryColor}" @tap.stop="cancel(itemIndex)">取消{{!info.is_create?`报名`:`活动`}}</view>
								</block>
								<block v-if="[3,6,5].includes(info.status_text) || info.start_time*1000 > new Date().getTime()">
									<view class="item-btn flex-center pl-md pr-md f-desc ml-md" :style="{color: primaryColor, borderColor: primaryColor}">查看</view>
								</block>
								<view class="item-btn flex-center pl-md pr-md f-desc ml-md c-base" v-if="!info.is_create && info.join_status == 4 && info.status_text > 2 && info.sign_start_time*1000 < new Date().getTime() && info.end_time*1000 > new Date().getTime() && !info.is_sign" :style="{ background: primaryColor}"
								@tap.stop="$util.goUrl({url: `/partner/pages/sign-in?id=${info.join_id}&is_code=1`})">签到核销</view>
							</view>
						</block>
						<block v-else>
							<view class="flex-warp flex-y-center">
								<block v-for="(item,index) in info.join_list" :key="index">
									<view class="rel" v-if="index < 2" :style="{zIndex: 4 - index*1, marginLeft: index > 0 ? '-44rpx' : ''}">
										<image class="user-cover" :src="item.avatarUrl" mode="aspectFill"></image>
										<view class="user-label abs f-little c-base flex-center" v-if="item.is_create == 1">局主</view>
									</view>
								</block>
								<view class="flex-center text-bold f-title" style="margin-right: 12rpx;" v-if="info.join_num > 1">∙∙∙</view>
								<i class="iconfont icontianjiatouxiang" :style="{color: primaryColor,fontSize: '84rpx'}" 
								@tap.stop="$util.goUrl({url: `/partner/pages/sign-up?id=${info.id}`})"></i>
							</view>
							<view class="f-caption flex-y-baseline">
								<text class="f-paragraph text-bold" :style="{color: primaryColor}">{{info.join_num}}</text>/{{info.sign_num}}人加入
							</view>
						</block>
					</view>
				</view>
			</view>
		</auth>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		props: {
			info: {
				type: Object,
				default () {
					return {}
				}
			},
			itemIndex: {
				type: Number,
				default () {
					return 0
				}
			},
			type: {
				type: String,
				default(){
					return ''
				}
			}
		},
		data() {
			return {
				statusType: { // 1待平台审核 2驳回 3已通过 4有参与者待审核 5待局主审核 6已加入
					1: {
						name: '待平台审核',
						color: '#FF1500',
						bgColor: '#FFE1E1'
					},
					2: {
						name: '已驳回',
						color: '#FF6E00',
						bgColor: '#FFEEE1'
					},
					3: {
						name: '已通过',
						color: '#1BCA62',
						bgColor: 'rgba(27, 202, 98, 0.1)'
					},
					4: {
						name: '有参与者待审核',
						color: '#FF6E00',
						bgColor: '#FFEEE1'
					},
					5: {
						name: '待局主审核',
						color: '#FF6E00',
						bgColor: '#FFEEE1'
					},
					6: {
						name: '已通过报名审核',
						color: '#1BCA62',
						bgColor: 'rgba(27, 202, 98, 0.1)'
					},
				}
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		filters:{
			hannelDistance(val){
				return (val/1000).toFixed(2)
			}
		},
		methods: {
			...mapActions(['getUserInfo']),
			...mapMutations(['updateUserItem']),
			toSee(data){
				this.$emit('see', data)
			},
			cancel(index){
				this.$emit('cancel', index)
			},
			toAppShare(){
				let {
					id: pid = 0
				} = this.userInfo
				let {
					id,
					title,
					cover: imageUrl
				} = this.info
				let summary = ''
			
				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let href = `${url}/h5/#/partner/pages/detail?id=${id}&pid=${pid}`
			
				// #ifdef H5
				this.$jweixin.showOptionMenu()
				this.$jweixin.shareAppMessage(title, summary, href, imageUrl)
				this.$jweixin.shareTimelineMessage(title, href, imageUrl)
				// #endif
				// #ifdef APP-PLUS 
				let item = {
					href,
					title,
					summary,
					imageUrl,
				}
				if (this.configInfo.isIos) {
					this.$util.showLoading()
					this.toTransImg(item)
				} else {
					this.sharePage(item)
				}
				// #endif
			},
			toTransImg(item) {
				let that = this
				let cur_unix = this.$util.DateToUnix(this.$util.formatTime(new Date(), 'YY-M-D h:m:s'))
				uni.downloadFile({
					url: item.imageUrl,
					success: (e) => {
						// 将png转换成jpg格式 只有jpg格式支持压缩api
						plus.zip.compressImage({
								src: e.tempFilePath,
								dst: `_doc/${cur_unix}.jpg`,
								format: "jpg"
							},
							response => {
								// 压缩图片
								plus.zip.compressImage({
									src: response.target,
									dst: `_doc/${cur_unix}-img.jpg`,
									quality: 50,
								}, res => {
									item.imageUrl = res.target || `/static/img/logo.png`
									that.sharePage(item)
								}, error => {
									item.imageUrl = `/static/img/logo.png`
									that.sharePage(item)
								})
							})
					}
				})
			},
			sharePage(item) {
				this.$util.hideAll()
				let {
					href,
					title,
					summary,
					imageUrl,
				} = item
				uni.share({
					provider: "weixin",
					scene: 'WXSceneSession',
					type: 0,
					href,
					title,
					summary,
					imageUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.longbingbing-partner-list-item {
		.partner-item{
			border-radius: 16rpx 16rpx 32rpx 32rpx;
			overflow: hidden;
			.cover{
				width: 100%;
				height: 330rpx;
			}
			.item-label{
				padding: 2px 10rpx 2px 12rpx;
				background: linear-gradient( 270deg, #FB7169 0%, #FFBF87 100%);
				border-radius: 0px 2px 16rpx 0px;
				top: 0;
				left: 0;
				z-index: 9;
			}
			.item-share{
				width: 42rpx;
				height: 42rpx;
				border-radius: 42rpx;
				right: 17rpx;
				top: 17rpx;
				background: rgba(0, 0, 0, 0.5);
			}
			.c-A3A3A3{
				color: #A3A3A3;
			}
			.user-cover{
				width: 80rpx;
				height: 80rpx;
				border-radius: 80rpx;
				margin-right: 12rpx;
				border: 2px solid #fff;
			}
			.user-label{
				width: 53rpx;
				height: 22rpx;
				border-radius: 22rpx;
				background: linear-gradient( 270deg, #FB7169 0%, #FFBF87 100%);
				bottom: -6rpx;
				margin-left: 18rpx;
			}
			.item-btn{
				height: 54rpx;
				border-radius: 54rpx;
				border: 1px solid transparent;
			}
			.item-status{
				height: 36rpx;
				border-radius: 6rpx;
			}
		}
	}
</style>